<template>
<div>
  <el-container>
    <el-header style="height: 160px">
      <div class="header">
        <div>
          <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          :router="true">
            <el-menu-item index="1" route="/">首页</el-menu-item>
            <el-submenu index="2" v-if="username" style="float: right">
              <template slot="title">{{username}}</template>
              <el-menu-item index="2-1" route="/cart">购物车</el-menu-item>
              <el-menu-item index="2-2" route="/order">我的订单</el-menu-item>
              <el-menu-item @click="dialogFormVisible = true">修改密码</el-menu-item>
              <el-menu-item @click="logout">退出</el-menu-item>
            </el-submenu>
            <el-submenu index="2" v-if="!username" style="float: right">
              <template slot="title">未登录</template>
              <el-menu-item index="2-2" route="/login">登录</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
        <div class="nav-header" style="margin-right: 40px">
          <div class="container">
            <div class="header-logo" style="float: left">
              <img src="../../assets/imgs/login-logo.png" height="90px">
            </div>
          </div>
        </div>
      </div>

      <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="原密码" :label-width="formLabelWidth">
            <el-input type="password" v-model="form.oldPwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" :label-width="formLabelWidth">
            <el-input type="password" v-model="form.newPwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="在输入新密码" :label-width="formLabelWidth">
            <el-input type="password" v-model="form.reNewPwd" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updPwd">确 定</el-button>
        </div>
      </el-dialog>

    </el-header>
    <el-main style="margin-top: 30px;height: auto">
      <router-view/>
    </el-main>
  </el-container>
</div>
</template>

<script>
export default {
  name: "Main",
  data(){
    return {
      activeIndex: '1',
      activeIndex2: '1',
      userList:[],
      username: '',
      dialogFormVisible: false,
      form: {
        oldPwd: '',
        newPwd: '',
        reNewPwd: ''
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    if (sessionStorage.getItem("username")!=undefined){
      this.username=sessionStorage.getItem("username");
    }
    this.getUser();
  },
  computed:{
    // username(){
    //   return sessionStorage.getItem("username");
    // },
    cartCount(){
      // 取
      return this.$store.state.cartCount;
    },
  },
  filters:{
    currency(val){
      if(!val)return '0.00';
      return '￥' + val.toFixed(2) + '元';
    }
  },
  mounted(){
    this.getProductList();
    let params = this.$route.params;
    if(params && params.from == 'login'){
      this.getCartCount();
    }
  },
  methods:{
    updPwd(){
      if (this.form.oldPwd =='' || this.form.newPwd=='' || this.form.reNewPwd==''){
        this.$message({
          type: 'info',
          message: '数据不能为空'
        });
      }else if(this.form.oldPwd!=sessionStorage.getItem("password")){
        this.$message({
          type: 'info',
          message: '原密码错误'
        });
      }else if(this.form.oldPwd==this.form.newPwd){
        this.$message({
          type: 'info',
          message: '新密码不能与原密码一致'
        });
      }else if(this.form.newPwd!=this.form.reNewPwd){
        this.$message({
          type: 'info',
          message: '两次新密码不一致'
        });
      }else if(this.form.newPwd.length<6){
        this.$message({
          type: 'info',
          message: '密码长度要大于6'
        });
      }else {
        let param=new URLSearchParams();
        param.append("id",sessionStorage.getItem("user_id"));
        console.log(this.form.oldPwd)
        console.log(this.form.newPwd)
        console.log(this.form.reNewPwd)
        param.append("password",this.form.newPwd);
        this.$http.post("/front/umsAdmin/updPwd",param).then(data => {
          if (data){
            sessionStorage.removeItem("token");
            sessionStorage.removeItem("username");
            sessionStorage.removeItem("password");
            sessionStorage.removeItem("user_id");
            this.$router.push("/login");
          }
        })
      }
    },
    getUser(){
      let param=new URLSearchParams();
      param.append("username",sessionStorage.getItem("username"));
      this.$http.post("/front/umsAdmin/selectUser",param).then(data => {
        console.log(data[0].id);
        sessionStorage.setItem("personal",data[0]);
        sessionStorage.setItem("user_id",data[0].id);
        this.userList=data;
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    login(){
      this.$router.push('/login');
    },
    getProductList(){
    },
    getCartCount(){
    },
    logout(){
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("username");
      sessionStorage.removeItem("password");
      sessionStorage.removeItem("user_id");
      this.$message.success('退出成功');
      this.$router.push("/")
    }
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  color: #333;
  text-align: center;
  line-height: 100px;
}

.el-main {
  color: #333;
  text-align: center;
  line-height: 160px;
}
.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

</style>
